<template>
	<div class="enroll">
		<div class="header">
			<h2>友惠家</h2>
			<span>精选友惠社区</span>
		</div>
		<form>
			<label> 
				<input type="text" class="tel" placeholder="请输入手机号" ref='phone' maxlength="11"  v-on:blur='dian'/>
				<div class="yan-dd" v-show='showw'>请输入正确的手机号</div>
			</label>
			<label> 
				<input type="text" id="code_input" ref='ty' placeholder="请输入验证码" class="yan"/>
			</label>
				<div id="v_container" class="tu"></div>
			<label> 
				<input type="text" class="yan" placeholder="请输入验证码" ref="code" @blur="codee"/>
				<input class="ma" value="获取验证码" @click="getCode"  v-show="show" :disabled="xian" id="ma"/>
				<div class="ma" v-show="!show">{{count}}</div>
				<div class="yan-d" v-show='showwww'>验证码不能为空</div>
			</label>
			<label> 
				<input type="password" class="mi" placeholder="请设置密码" ref="passwords" @blur="passwordss"/>
				<div class="yan-dd" v-show='showwwww'>密码不能为空</div>
			</label>
			
		</form>
		<div class="dl" @click="zhuce">注册</div>
		
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				count: '',
				show: true,
				xian: true,
				showw:false,
				showww:false,
				showwww:false,
				showwwww:false,
				neirong: [],
			}
		},
		mounted() {
				var verifyCode = new GVerify("v_container");
					document.getElementById("code_input").onblur = function(){
					var res = verifyCode.validate(document.getElementById("code_input").value);
						if(res){
							document.getElementById("ma").disabled="";
							Toast({
								message: "图形验证码成功",
								position: 'middle',
								duration: 2000
							});
							
						}else{
							document.getElementById("ma").disabled="false";
							Toast({
								message: "图形验证码失败",
								position: 'middle',
								duration: 2000
							});
						}
					}
			
		},
		methods: {
			dian:function(){
//				 var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
				 var tel = this.$refs.phone.value
				 if(tel.length != 11){
				 	Toast({
						message: "请输入正确的手机号",
						position: 'middle',
						duration: 3000
					})
				 }
		},
			codee:function(){
				var code = this.$refs.code.value
				if(code == '' ){
					Toast({
						message: "请输入正确的验证码",
						position: 'middle',
						duration: 3000
					})
				}
			},
			passwordss:function(){
				var passwords = this.$refs.passwords.value
				if(passwords == ''){
					Toast({
						message: "请输入正确的密码",
						position: 'middle',
						duration: 3000
					})
				}
			},
			getCode: function() {
				var phone = this.$refs.phone.value;
				var url = BaseUrl + "login/code?phone=" + phone
				this.$http.get(url).then(res => {
					if(res.data.code == '10000'){
							this.show = false
							var dsq = 60
							if(!this.timer) {
								this.count = dsq;
								this.timer = setInterval(() => {
									if(this.count > 0 && this.count <= dsq) {
										this.count--;
									} else {
										this.show = true;
										clearInterval(this.timer);
										this.timer = null;
									}
								}, 1000)
							}
					}else{
						Toast({
						message: res.data.msg,
						position: 'middle',
						duration: 3000
						});
					}
				})
			},
			zhuce: function() {
				var phone = this.$refs.phone.value
				var passwords = this.$refs.passwords.value
				var code = this.$refs.code.value
				var ty = this.$refs.ty.value
				if(phone != '' && code != '' && ty != '' && passwords!=''){
					
				var url = BaseUrl + "login/reg?userPhone=" + phone + "&userPwd=" + passwords + "&code=" + code + "&laiyuan=wap"
					this.$http.get(url).then(res => {						
							if(res.data.code == '10000'){
								this.neirong = res
								this.$router.push({
									path: '/enter?url=1'
								})
							}else{
								Toast({
									message: res.data.msg,
									position: 'middle',
									duration: 3000
								});
							}
					})
				}else{
					Toast({
						message: "手机号,图形码,验证码,密码，不能为空",
						position: 'middle',
						duration: 3000
					})
				}

					
				
			}
	}


	}
</script>

<style scoped="scoped">
	html,
	body,
	.enroll {
		width: 100%;
		height: 100%;
		background: url(../assets/images2/bei.png);
		background-size: 100% 100%;
	}
	
	.enroll {
		height: 13.5rem;
	}
	
	.header {
		width: 100%;
		text-align: center;
		padding-top: 1.54rem;
	}
	
	.header h2 {
		font-family: PingFangSC-Regular;
		font-size: 0.64rem;
		color: #FFFFFF;
	}
	
	.header span {
		font-family: PingFangSC-Regular;
		font-size: 0.2rem;
		display: block;
		color: #FFFFFF;
		margin-top: -0.1rem;
		margin-bottom: 1.4rem;
	}
	
	form {
		width: 100%;
		text-align: center;
		overflow: hidden;
	}
	form label{
		overflow: hidden;
	}
	.tel {
		width: 6rem;
		height: 0.82rem;
		outline: none;
		text-indent: 0.29rem;
		font-size: 0.3rem;
		color: rgba(255, 255, 255, 0.5);
		background: rgba(255, 255, 255, 0);
		border-radius: 0.5rem;
		border: 1px solid #ffffff;
	}
	
	.yan {
		width: 3.87rem;
		height: 0.82rem;
		outline: none;
		text-indent: 0.29rem;
		font-size: 0.3rem;
		color: rgba(255, 255, 255, 0.5);
		background: rgba(255, 255, 255, 0);
		border-radius: 0.5rem;
		border: 1px solid #ffffff;
		float: left;
		margin-top: 0.5rem;
		margin-left: 0.7rem;
	}
	
	.tu {
		width: 1.5rem;
		height: 0.67rem;
		background: #ffffff;
		float: left;
		margin-left: 0.4rem;
		margin-top: 0.6rem;
		text-align: center;
		line-height: 0.67rem;
	}
	
	.ma {
		width: 2.03rem;
		height: 0.82rem;
		border: 1px solid #ffffff;
		outline: none;
		color: rgba(255, 255, 255, 0.5);
		background: rgba(255, 255, 255, 0);
		border-radius: 0.5rem;
		text-align: center;
		float: left;
		margin-left: 0.2rem;
		margin-top: 0.5rem;
		line-height: 0.82rem;
	}
	
	.mi {
		width: 6rem;
		height: 0.82rem;
		outline: none;
		text-indent: 0.29rem;
		font-size: 0.3rem;
		color: rgba(255, 255, 255, 0.5);
		background: rgba(255, 255, 255, 0);
		border-radius: 0.5rem;
		border: 1px solid #ffffff;
		margin-top: 0.5rem;
	}
	
	.dl {
		width: 6rem;
		height: 0.82rem;
		background: #ffffff;
		font-size: 0.32rem;
		color: #FF2040;
		font-family: "PingFangSC-Medium";
		margin: 0 auto;
		text-align: center;
		line-height: 0.82rem;
		margin-top: 0.58rem;
		border-radius: 0.5rem;
	}
	.yan-d{
		width: 100%;
		float: left;
		margin-top: 0.4rem;
	}
	.yan-dd{
		margin-top: 0.4rem;
	}
</style>